<template>
  <div class="collage-bg c-pb20" v-if="dataInfo">
    <div class="c-pt48 c-p">
      <template v-if="!isMall">
        <div class="c-fs32 c-fc-white c-fw600 c-textAlign-c" v-if="dataInfo.payStatus == -1 || dataInfo.payStatus == -2">拼团失败</div>
        <div class="c-fs32 c-fc-white c-fw600 c-textAlign-c" v-else-if="(dataInfo.collage.status == 2 && dataInfo.userType != -1 && (dataInfo.status == 1 || (dataInfo.payStatus == 1 && dataInfo.status == 2))) || (dataInfo.collage.status > 2 && dataInfo.userType != -1 && dataInfo.status == 1)">恭喜您，{{dataInfo.status == 1 ? '拼团成功' : '支付成功'}}!</div>
        <div class="c-fs32 c-fc-white c-fw600 c-textAlign-c" v-else-if="dataInfo && ((dataInfo.collage.status >= 3 && dataInfo.status != 1) || (dataInfo.teamCount != 0 && dataInfo.peopleNum != 0 && dataInfo.teamCount == dataInfo.peopleNum && dataInfo.userType == -1) || dataInfo.status >= 3 || (dataInfo.status == 1 && dataInfo.userType == -1))">{{dataInfo.collage.status == 3 && dataInfo.status != 1 ? '活动已结束' : (dataInfo.collage.status == 4 && dataInfo.status != 1 ? '活动已过期' : (dataInfo.teamCount == dataInfo.peopleNum && dataInfo.userType == -1 ? "拼团已满" :(dataInfo.status >= 3 || (dataInfo.status == 1 && dataInfo.userType == -1) ? "此团已结束" : '')))}}</div>
        <div class="c-fs32 c-fc-white c-fw600 c-textAlign-c" v-else-if="groupId == -1 && dataInfo.collage.status < 3">开团{{dataInfo.hours}}小时自动结束</div>
        <div class="c-fs32 c-fc-white c-fw600 c-textAlign-c" v-else-if="dataInfo.collage.status == 2 && dataInfo.userType == -1 && dataInfo.status == 2 && dataInfo.payStatus != 1 && dataInfo.payStatus != 2">好友邀请您参加拼团</div>
        <div class="c-hh44" v-else></div>
      </template>
      <template v-else>
        <div class="c-fs32 c-fc-white c-fw600 c-textAlign-c" v-if="dataInfo.status == 1">恭喜您，拼团成功</div>
        <div class="c-fs32 c-fc-white c-fw600 c-textAlign-c" v-else-if="dataInfo.status == 2">邀请好友参团</div>
        <div class="c-fs32 c-fc-white c-fw600 c-textAlign-c" v-else-if="dataInfo.status == 3">拼团失败</div>
        <div class="c-fs32 c-fc-white c-fw600 c-textAlign-c" v-else-if="dataInfo.status == 4">拼团已停止</div>
        <div class="c-hh44" v-else></div>
      </template>
      <div class="c-bg-white c-fs20 c-fc-xmlred c-ww116 c-hh44 c-flex-row c-flex-center c-pa c-br-tl24 c-br-bl24 c-p-r0 c-p-b0 c-fw600" @click="showNotice = true">拼团须知</div>
    </div>
    <div class="c-bg-white c-mt44 c-br16 c-mh24 c-ph20 c-pv20 c-flex-row" v-if="(dataInfo.collage && !isMall) || isMall" @click="goToDetail()">
      <div :class="isMall ? 'c-ww160' : 'c-ww240'" class="c-maxh160 c-text-hidden c-flex-row c-flex-center c-flex-shrink0 c-br16">
        <div class="c-w100 c-p">
          <template v-if="!isMall">
            <vip-custom-img :cover="vipInfo && vipInfo.cover ? vipInfo.cover : {}" :coverUrl="dataInfo && dataInfo.collage.cover ? dataInfo.collage.cover : ''" :prodType="dataInfo.collage ? dataInfo.collage.prodType : ''" :imgClass="'imgCloseBig'" :fontClass="{
              boxStyle: 'c-pv40 c-pl12',
              name: 'c-fs32 c-text-ellipsis1 c-fw-b', duration: 'c-fs26'}" :content="vipInfo ? {name: vipInfo.name, duration: vipInfo.duration, durationType: vipInfo.durationType} : {}" />
          </template>
          <template v-else>
            <img class="c-w100 imgCloseBig c-br16" :src="$addXossFilter(dataInfo.avatar, require('../../../assets/no_chat_img.png'))" />
          </template>
        </div>
      </div>
      <div class="c-flex-column c-justify-sb c-w0 c-flex-grow1 c-ml20">
        <div class="c-fs24 c-fc-xblack c-text-ellipsis2 c-lh40">
          <span v-if="dataInfo.peopleNum" class="c-fs20 c-fc-xmlred bg-FF300C-op10 c-pv2 c-ph4 c-mr8 c-br8 c-fw600">{{dataInfo.peopleNum}}人团</span>
          <span class="c-vcAlign-middle">{{isMall ? dataInfo.name : dataInfo.collage.title}}</span>
        </div>
        <div class="c-fs20 c-fc-xmlred" v-if="!isMall">团{{dataInfo.userType == 1 || (dataInfo.userType == -1 && dataInfo.status != 2) ? '长' : '员'}}价<span class="c-fs32 c-fw600"><span class="c-fs20">{{'￥' | iosPriceFilter}}</span>{{dataInfo.userType == 1 || (dataInfo.userType == -1 && dataInfo.status != 2) ? (dataInfo.collage.captainPriceType == 2 ? dataInfo.collage.gradesCaptainPrice : dataInfo.collage.captainPrice) : dataInfo.collage.playersPrice}}</span></div>
        <div class="c-fs20 c-fc-xmlred" v-else>拼购价<span class="c-fs32 c-fw600"><span class="c-fs20">{{'￥' | iosPriceFilter}}</span>{{dataInfo.payMoney}}</span></div>
        <div class="c-fs22 c-fc-gray c-text-decoration-through">{{'￥' | iosPriceFilter}}{{!isMall ? dataInfo.collage.prodPrice : dataInfo.price}}</div>
      </div>
    </div>
    <div class="c-bg-white c-mt20 c-br16 c-mh24 ph44 c-pv40">
      <template v-if="!isMall">
        <!-- <div v-if="dataInfo.payStatus == -1 || dataInfo.payStatus == -2" class="c-fs26 c-fc-sblack c-textAlign-c"><span class="icon iconfont c-fs26 c-fc-red c-mr16">&#xe6e1;</span>拼团失败</div> -->
        <div v-if="dataInfo.collage.status >= 2 && dataInfo.userType != -1 && dataInfo.status == 1" class="c-fs26 c-fc-xblack c-textAlign-c"><span class="icon iconfont c-fs32 c-fc-45B930 c-mr16 c-fw600">&#xe796;</span>已满{{dataInfo.collage.collageGroupType == 2 ? dataInfo.clustering : dataInfo.peopleNum}}人，拼团成功!</div>
        <div v-else-if="dataInfo && ((dataInfo.collage.status >= 3 && dataInfo.status != 1) || (dataInfo.teamCount != 0 && dataInfo.peopleNum != 0 && dataInfo.teamCount == dataInfo.peopleNum && dataInfo.userType == -1) || dataInfo.status >= 3 || (dataInfo.status == 1 && dataInfo.userType == -1))" class="c-fs32 c-fc-xblack c-textAlign-c c-fw600"><span class="icon iconfont c-fs32 c-fc-red c-mr16">&#xe69d;</span>{{dataInfo.collage.status == 3 && dataInfo.status != 1 ? '活动已结束' : (dataInfo.collage.status == 4 && dataInfo.status != 1 ? '活动已过期' : (dataInfo.teamCount == dataInfo.peopleNum && dataInfo.userType == -1 ? "拼团已满" :(dataInfo.status >= 3 || (dataInfo.status == 1 && dataInfo.userType == -1) ? "此团已结束" : '')))}}</div>
        <template v-if="dataInfo.collage.collageGroupType == 1">
          <div v-if="dataInfo.collage.status == 2 && dataInfo.userType == -1 && groupId == -1 && dataInfo.payStatus != 1 && dataInfo.payStatus != 2" class="c-fs32 c-fc-xblack c-textAlign-c c-fw600">仅需<span class="c-fc-xmlred">{{dataInfo.peopleNum}}</span>人即可成团，快来开团吧！</div>
          <div v-if="dataInfo.collage.status == 2 && dataInfo.userType == -1 && dataInfo.status == 2 && dataInfo.payStatus != 1 && dataInfo.payStatus != 2" class="c-fs32 c-fc-xblack c-textAlign-c c-fw600">再邀<span class="c-fc-xmlred">{{dataInfo.peopleNum - dataInfo.teamCount}}</span>人即可成团</div>
          <div v-if="dataInfo.collage.status == 2 && dataInfo.userType != -1 && dataInfo.status == 2 && dataInfo.payStatus == 1" class="c-fs32 c-fc-xblack c-textAlign-c c-fw600">再邀<span class="c-fc-xmlred">{{dataInfo.peopleNum - dataInfo.teamCount}}</span>人即可成团</div>
        </template>
        <!-- 阶梯拼团 -->
        <template v-if="dataInfo.collage.collageGroupType == 2">
          <div v-if="dataInfo.collage.collageGroupType == 2 && dataInfo.collage.collageGrades && dataInfo.collage.status == 2 && dataInfo.userType == -1 && groupId == -1 && (dataInfo.payStatus != 1 && dataInfo.payStatus != 2)" class="c-fs32 c-fc-xblack c-textAlign-c c-fw600">拼团类型：<span v-for="(item, index) in dataInfo.collage.collageGrades" :key="index">￥{{Number(item.price)}}/{{item.grade}}人团&nbsp;&nbsp;</span></div>
          <div v-if="dataInfo.collage.status == 2 && dataInfo.userType == -1 && dataInfo.status == 2 && dataInfo.payStatus != 1 && dataInfo.payStatus != 2" class="c-fs32 c-fc-xblack c-textAlign-c c-fw600">再邀<span class="c-fc-xmlred">{{dataInfo.remain}}</span>人即可成团</div>
          <div v-if="dataInfo.collage.status == 2 && dataInfo.userType != -1 && dataInfo.status == 2 && dataInfo.payStatus == 1" class="c-fs32 c-fc-xblack c-textAlign-c c-fw600">再邀<span class="c-fc-xmlred">{{dataInfo.remain}}</span>人即可成团</div>
        </template>
      </template>
      <template v-else>
        <div v-if="dataInfo.status == 1" class="c-fs26 c-fc-xblack c-textAlign-c"><span class="icon iconfont c-fs26 c-fc-45B930 c-mr16 c-fw600">&#xe796;</span>已满{{dataInfo.peopleNum}}人，拼团成功!</div>
        <div v-else-if="dataInfo.status == 3 || dataInfo.status == 4" class="c-fs26 c-fc-xblack c-textAlign-c"><span class="icon iconfont c-fs26 c-fc-red c-mr16 c-fw600">&#xe69d;</span>{{dataInfo.status == 3 ? '拼团失败' : '拼团已停止'}}</div>
        <div v-else-if="dataInfo.status == 2" class="c-fs26 c-fc-xblack c-textAlign-c c-fw600">再邀<span class="c-fc-xmlred">{{dataInfo.lastPeopleNum}}</span>人即可成团</div>
      </template>
      <div v-if="!isMall && (groupId == -1 || (groupId != -1 && dataInfo.status == 2 && dataInfo.payStatus != 2)) && dataInfo.collage.status < 3" class="c-fs22 c-fc-xblack c-textAlign-c c-mt32">
        <span class="c-mr6 c-fc-xmlred">剩余</span>
        <span v-if="groupId != -1">
          <cj-clocker :time="timeFn()" @on-finish="finishFn()">
            <template v-slot="{ timeInfo }">
              <span class="c-fc-white c-bg-xmlred c-ph4 c-br4">{{timeInfo.H}}</span> : <span class="c-fc-white c-bg-xmlred c-ph4 c-br4">{{timeInfo.M}}</span> : <span class="c-fc-white c-bg-xmlred c-ph4 c-br4">{{timeInfo.S}}</span>
            </template>
          </cj-clocker>
        </span>
        <span v-else>
          <span class="c-fc-white c-bg-xmlred c-ph4 c-br4">{{dataInfo.hours}}</span> : <span class="c-fc-white c-bg-xmlred c-ph4 c-br4">00</span> : <span class="c-fc-white c-bg-xmlred c-ph4 c-br4">00</span>
        </span>
        <span class="c-ml6 c-fc-xmlred">结束</span>
      </div>
      <div v-if="isMall && dataInfo.status == 2" class="c-fs22 c-fc-xblack c-textAlign-c c-mt32">
        <span class="c-mr6 c-fc-xmlred">剩余</span>
        <span>
          <cj-clocker :time="mallTimeFn()" @on-finish="mallFinishFn()">
            <template v-slot="{ timeInfo }">
              <span class="c-fc-white c-bg-xmlred c-ph4 c-br4">{{timeInfo.H}}</span> : <span class="c-fc-white c-bg-xmlred c-ph4 c-br4">{{timeInfo.M}}</span> : <span class="c-fc-white c-bg-xmlred c-ph4 c-br4">{{timeInfo.S}}</span>
            </template>
          </cj-clocker>
        </span>
        <span class="c-ml6 c-fc-xmlred">结束</span>
      </div>
      <div v-if="(isMall && dataInfo.teamList && dataInfo.teamList.length > 0) || (!isMall && !(dataInfo.collage.collageGroupType == 2 && dataInfo.collage.collageGrades && dataInfo.collage.status == 2 && dataInfo.userType == -1 && groupId == -1 && (dataInfo.payStatus != 1 && dataInfo.payStatus != 2)))" class="c-flex-row">
        <div class="c-flex-row c-flexw-wrap center" v-if="!isMall">
          <template v-if="dataInfo.team">
            <div v-for="(item,index) in dataInfo.team" :key="index" :class="(index + 1) % 4 == 0 ? '' : 'c-mr44'" class="c-ww92 c-hh92 c-brp50 c-flex-row c-flex-center c-p c-mt48">
              <img :src="$addXossFilter(item.headUrl, require('../../../assets/defult_head.png'))" class="c-h100 c-w100 c-brp50" />
              <div v-if="item.type == 1" class="c-fs20 c-fc-white c-ww76 c-hh32 c-flex-row c-flex-center c-br16 c-pa c-p-lp50 c-translate-x-50 b-12 bg-team c-fw600">团长</div>
              <div v-else class="c-fs20 c-fc-xmlred c-ww76 c-hh32 c-flex-row c-flex-center c-br16 c-pa c-p-lp50 c-translate-x-50 b-12 c-bg-white bd1-FF300C c-fw600">团员</div>
            </div>
          </template>
          <template v-if="showTeam>0">
            <div v-for="(item, index) in showTeam" :key="index" :class="(index + 1 + (dataInfo.team ? dataInfo.team.length : 0)) % 4 == 0 ? '' : 'c-mr44'" class="c-ww92 c-hh92 c-brp50 c-flex-row c-flex-center c-bg-f2 c-fs40 bd1-dashed-ccc c-fc-sgray c-pb4 c-mt48">+</div>
          </template>
        </div>
        <div class="c-flex-row c-flexw-wrap center" v-else>
          <template v-if="dataInfo.teamList">
            <div v-for="(item,index) in dataInfo.teamList" :key="index" :class="(index + 1) % 4 == 0 ? '' : 'c-mr44'" class="c-ww92 c-hh92 c-brp50 c-flex-row c-flex-center c-p c-mt48">
              <img :src="$addXossFilter(item.headimgurl, require('../../../assets/defult_head.png'))" class="c-h100 c-w100 c-brp50" />
              <div v-if="item.type == 1" class="c-fs20 c-fc-white c-ww76 c-hh32 c-flex-row c-flex-center c-br16 c-pa c-p-lp50 c-translate-x-50 b-12 bg-team c-fw600">团长</div>
              <div v-else class="c-fs16 c-fc-xmlred c-ww56 c-hh24 c-flex-row c-flex-center c-br16 c-pa c-p-lp50 c-translate-x-50 b-12 c-bg-white bd1-FF300C">团员</div>
            </div>
          </template>
          <div v-for="(item, index) in dataInfo.lastPeopleNum" :key="index" :class="(index + 1 + (dataInfo.teamList ? dataInfo.teamList.length : 0)) % 4 == 0 ? '' : 'c-mr44'" class="c-ww92 c-hh92 c-brp50 c-flex-row c-flex-center c-bg-f2 c-fs40 bd1-dashed-ccc c-fc-sgray c-pb4 c-mt48">+</div>
        </div>
      </div>
      <template v-if="!isMall">
        <div class="c-fs28 c-fw600 c-fc-white c-hh72 c-br36 c-flex-row c-flex-center c-mt48 bg-btn1" @click="goBuy" v-if="dataInfo.collage.status == 2 && dataInfo.userType == -1 && (groupId == -1 || dataInfo.status == 2) && (dataInfo.payStatus != 1 && dataInfo.payStatus != 2)">{{'我要' + (groupId == -1 ? '开团' : '参团') | iosPayText(dataInfo.collage.prodType)}}</div>
        <div class="c-fs28 c-fw600 c-fc-white c-hh72 c-br36 c-flex-row c-flex-center c-mt48 bg-btn1 c-mt30" @click="inviteFriends" v-if="dataInfo.collage.status == 2 && dataInfo.userType != -1 && dataInfo.status == 2 && dataInfo.payStatus == 1">邀请好友参团</div>
        <div class="c-fs28 c-fw600 c-fc-white c-hh72 c-br36 c-flex-row c-flex-center c-mt48 bg-btn1" @click="goToDetail(2)" v-if="dataInfo.userType != -1 && dataInfo.status == 1">查看{{collageTypeText[dataInfo.collage.prodType] ? collageTypeText[dataInfo.collage.prodType] : ''}}</div>
        <div class="c-fs28 c-fw600 c-fc-white c-hh72 c-br36 c-flex-row c-flex-center c-mt48 bg-btn1" @click="goToDetail()" v-if="dataInfo.collage.status == 2 && dataInfo.userType == -1 && (dataInfo.groupId != -1 && (dataInfo.status >= 3 || dataInfo.status == 1))">重发拼团</div>
        <div class="c-fs28 c-fw600 c-fc-xmlred c-hh72 c-br36 c-flex-row c-flex-center bg-btn2 c-mt30" @click="goCollageList" v-if="dataInfo.collage.status >= 3 || (dataInfo.collage.status == 2 && dataInfo.status != 2) || (dataInfo.collage.status == 2 && dataInfo.status == 2 && (dataInfo.payStatus == 2 || dataInfo.payStatus == -1 || dataInfo.payStatus == -2))">查看更多拼团</div>
      </template>
      <template v-else>
        <div class="c-fs28 c-fw600 c-fc-white c-hh72 c-br36 c-flex-row c-flex-center c-mt48 bg-btn1" @click="inviteFriends" v-if="dataInfo.status == 2">邀请好友参团</div>
        <div class="c-fs28 c-fw600 c-fc-xmlred c-hh72 c-br36 c-flex-row c-flex-center bg-btn2 c-mt30" @click="goOrderDetail">订单详情</div>
      </template>
      <!-- <div class="c-bd-t1 c-mt40"></div>
      <div class="c-mt40 c-flex-row">
        <div class="c-flex-column c-aligni-center">
          <img class="c-ww80 c-hh80" :src="$addXossFilter(require('../../../assets/i/wap/collage/step1.png'))" alt="">
          <div class="c-fs20 c-fc-sblack c-mt18">选择商品</div>
          <div class="c-fs20 c-fc-sblack">开团或者参团</div>
        </div>
        <div class="iconfont c-fs32 c-fc-sgray c-w0 c-flex-grow1 c-textAlign-c c-pt20">&#xe737;</div>
        <div class="c-flex-column c-aligni-center">
          <img class="c-ww80 c-hh80" :src="$addXossFilter(require('../../../assets/i/wap/collage/step2.png'))" alt="">
          <div class="c-fs20 c-fc-sblack c-mt18">邀请好友</div>
          <div class="c-fs20 c-fc-sblack">参团优惠多</div>
        </div>
        <div class="iconfont c-fs32 c-fc-sgray c-w0 c-flex-grow1 c-textAlign-c c-pt20">&#xe737;</div>
        <div class="c-flex-column c-aligni-center">
          <img class="c-ww80 c-hh80" :src="$addXossFilter(require('../../../assets/i/wap/collage/step3.png'))" alt="">
          <div class="c-fs20 c-fc-sblack c-mt18">人满成团</div>
          <div class="c-fs20 c-fc-sblack">立享优惠</div>
        </div>
      </div> -->
    </div>
    <div class="c-bg-white c-mt20 c-br16 c-mh24 c-ph24 c-pb40 c-pt30" v-if="(dataInfo && dataInfo.team != null && dataInfo.team.length > 0 && !isMall) || (dataInfo && dataInfo.teamList != null && dataInfo.teamList.length > 0 && isMall)">
      <div class="c-fs28 c-fc-xblack c-fw600">参团记录</div>
      <div class="c-bd-t1 c-mt30"></div>
      <div class="c-flex-row c-mt30" v-for="(item,index) in (!isMall ? dataInfo.team : dataInfo.teamList)" :key="index">
        <img :src="$addXossFilter(!isMall ? item.headUrl : item.headimgurl, require('../../../assets/defult_head.png'))" class="c-ww84 c-hh84 c-brp50" alt="">
        <div class="c-w0 c-flex-grow1 c-flex-column c-justify-sb c-ml12 c-pv10">
          <div class="c-flex-row c-aligni-center">
            <div class="c-fs24 c-fc-xblack" v-if="item.nickname">{{item.nickname.length > 3 ? (item.nickname.substr(0, 3) + "***") : (item.nickname + "***")}}</div>
            <div class="c-fs16 c-fc-white c-pv2 c-ph10 c-br20 c-bg-xmlred c-ml12 c-fw600" v-if="item.type == 1">团长</div>
            <div class="c-fs16 c-fc-xmlred c-pv2 c-ph10 c-br20 bd1-FF300C c-ml12 c-fw600" v-else>团员</div>
          </div>
          <div class="c-fs20 c-fc-sblack">{{!isMall ? item.payTime : item.createdAt}} {{item.type == 1 ? '发起' : '参与拼团'}}</div>
        </div>
      </div>
    </div>
    <!-- 入群引导 -->
    <cj-popup v-if="showGuidePop" v-model="showGuidePop" @closed="hideDialog" closeable class="c-bg-transparent">
      <div class="c-ww520 c-p">
        <img class="c-w100" src="https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/activity/guide_bg.png" alt="">
        <div class="c-pa c-p-t0 c-w100 c-fs24 c-fc-xblack">
          <div class="c-flex-column c-flex-center c-pt40">
            <div class="c-flex-column c-ww440 c-flex-center c-pb18">
              <div class="c-mb40 c-mt20 c-text-ellipsis1">{{guideInfo.guideDesc}}</div>
              <div class="c-fs22 c-text-ellipsis1">{{guideInfo.guideTitle}}</div>
              <img :src="$addXossFilter(guideInfo.guideQrcode)" alt="" class="c-ww250 c-hh250 c-mt20">
              <div class="c-fs20 c-fc-gray c-mt20">长按二维码识别</div>
            </div>
          </div>
        </div>
      </div>
    </cj-popup>
    <!--选择阶梯-->
    <cj-popup v-model="isShowBuy" position="bottom" class="c-ph24 c-pv24" v-if="!isMall && dataInfo.collage && dataInfo.collage.collageGroupType == 2 && dataInfo.collage.collageGrades && dataInfo.collage.collageGrades.length > 0">
      <div class="c-flex-row c-justify-sb">
        <div class="c-flex-row">
          <div class="c-ww104 c-hh70 c-text-hidden c-flex-row c-flex-center c-flex-shrink0">
            <div class="c-w100 c-p">
              <!-- <vip-custom-img :cover="vipInfo && vipInfo.cover ? vipInfo.cover : {}" :coverUrl="dataInfo && dataInfo.collage.cover ? dataInfo.collage.cover : ''" :prodType="dataInfo.collage ? dataInfo.collage.prodType : ''" :imgClass="'imgCloseBig'" :fontClass="{
                boxStyle: 'c-pv40 c-pl12',
                name: 'c-fs32 c-text-ellipsis1 c-fw-b', duration: 'c-fs26'}" :content="{name: vipInfo.name, duration: vipInfo.duration, durationType: vipInfo.durationType}" v-if="vipInfo && vipInfo.cover && (vipInfo.cover.coverType ==1 || vipInfo.cover.coverType ==2)" /> -->
              <vip-custom-img :cover="vipInfo && vipInfo.cover ? vipInfo.cover : {}" :coverUrl="dataInfo && dataInfo.collage.cover ? dataInfo.collage.cover : ''" :prodType="dataInfo.collage ? dataInfo.collage.prodType : ''" :imgClass="'imgCloseBig'" :fontClass="{
                boxStyle: 'c-pv40 c-pl12',
                name: 'c-fs32 c-text-ellipsis1 c-fw-b', duration: 'c-fs26'}" :content="vipInfo ? {name: vipInfo.name, duration: vipInfo.duration, durationType: vipInfo.durationType} : {}" />
            </div>
          </div>
          <div class="c-flex-column c-hh70 c-justify-sb c-ml20">
            <div class="c-flex-row c-aligni-center">
              <template v-if="dataInfo.collage.captainPriceType == 1">
                <span class="c-fs26 theme-fc"><span class="c-fs20">￥</span>{{dataInfo.collage.captainPrice}}</span>
              </template>
              <template v-else>
                <span class="c-fs26 theme-fc" v-for="(item, index) in dataInfo.collage.collageGrades" :key="index" v-show="choosePriceIndex == index"><span class="c-fs20">￥</span>{{item.captainPrice}}</span>
              </template>
              <span class="c-fc-white theme-bg c-fs16 c-pv2 c-ph6 c-br16 c-ml12">团长价</span>
            </div>
            <span class="c-fs16 c-fc-gray">原价：{{'￥' | iosPriceFilter}}{{dataInfo.collage.prodPrice}}</span>
          </div>
        </div>
        <span class="iconfont c-fs30 c-fc-sblack" @click="isShowBuy = false;">&#xe6e1;</span>
      </div>
      <div class="c-pt40 c-pb36">
        <div class="c-fs22 c-fc-xblack c-mb30">拼团类型（团员价）</div>
        <div class="c-flex-row c-flexw-wrap">
          <div class="c-pv10 c-ph30 c-fs24 c-br30 c-mr24 c-mb24" :class="choosePriceIndex == index ? 'theme-bd1 theme-fc priceBg' : 'c-fc-xblack c-bg-f6'" v-for="(item,index) in dataInfo.collage.collageGrades" :key="index" @click="choosePriceIndex = index;">￥{{Number(item.price)}}/{{item.grade}}人团</div>
        </div>
      </div>
      <div class="c-fs24 c-fc-white c-textAlign-c c-pv16 c-w100 c-br40 theme-bg" @click="goChoseBuy()">下一步</div>
    </cj-popup>
    <cj-popup v-model="showNotice" round position="bottom" @closed="showNotice = false" class="changeline-popup">
      <div class="c-bg-white c-pt20 c-pb32 c-ph24 c-br-tr16 c-br-tl16 c-minh50vh c-maxh80vh c-flex-column">
        <div class="c-p c-flex-shrink0 c-mb20">
          <div class="c-fs28 c-fc-xblack  c-fw-b c-flex-row  c-justify-center ">拼团须知</div>
          <div class="c-fs24 c-fc-gray c-pa c-p-t8 c-p-r8 iconfont" @click="showNotice = false">&#xeca0;</div>
        </div>
        <ul class="c-pt12 c-pb60 c-ph16 c-fc-sblack c-fs24 c-liststyle-none">
          <li class="c-lh48">1、{{!isMall && dataInfo.collage && dataInfo.collage.collageGroupType == 2 ? '阶梯拼团（以下简称：拼团）是指团长在发起拼团时，选择指定的参团人数，邀请对应数量好友一起拼单购买的团购活动，参团人数越多，价格折扣越低;' : '拼团是指由多人一起拼单购买的促销活动，通过拼单买家可以享受低价优惠;'}}</li>
          <li class="c-lh48">2、在商家设置的拼团时限内（如果活动剩余时间少于拼团时限，以活动剩余时间为准），找到满足人数的好友参加拼团，即拼团成功;
          </li>
          <li class="c-lh48">3、在商家设置的拼团时限内没有满足拼团人数要求，拼团失败，系统会自动在24小时内将您支付的钱，根据您原支付方式，退回微信钱包或者帐户余额;</li>
          <li class="c-lh48">4、拼团活动不支持使用积分抵扣以及会员抵扣;</li>
          <li class="c-lh48">5、拼团活动不参与赠送礼品活动</li>
        </ul>
      </div>
    </cj-popup>
    <collage-poster ref="collageCom" @closeShare="isShowShare=false;" :collageInfo="collagePosterInfo"></collage-poster>
  </div>
</template>

<script>
import VipCustomImg from "@/components/templates/common/VipCustomImg.vue";
import { utilJs } from "@/utils/common.js"
import { goDetails } from "@/utils/goDetails.js";
import { getBindPhoneSetting } from "@/utils/checkUnBindPhone.js";
import collagePoster from "./collagePoster.vue"

let fromPath = '';
let to = "";
export default {
  name: "CollageDetail",
  components: {
    VipCustomImg,
    collagePoster
  },
  props: [],
  data() {
    return {
      cfrom: global.ckFrom,
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      gzgzh: localStorage.getItem(`gzqr${localStorage.getItem("companyId")}`),
      isShowShare: false,
      groupId: -1,
      collageId: -1,
      dataInfo: '',
      vipInfo: '',
      freeOpenClick: true,
      guideInfo: "", //入群引导信息
      showGuidePop: false, //显示入群提示
      isMall: false,
      showAllMerber: false,
      collageProdTypeToNew: {
        '5': global.ckFrom.collageCourse,
        '9': global.ckFrom.collageColumn,
        '1': global.ckFrom.collageVip,
        '23': global.ckFrom.collageSvip,
        '61': global.ckFrom.collagePackage,
        '51': global.ckFrom.collageLive,
        '7': global.ckFrom.collageActivity,
        '78': global.ckFrom.collageCamp,
        '10': global.ckFrom.collageSocial,
        '41': global.ckFrom.collageClockIn,
        '103': global.ckFrom.distributionCollageColumn,
        '129': global.ckFrom.collageItemBank,
        '116': global.ckFrom.collageEdu,
        '142': global.ckFrom.collageEbooks,
        '180': global.ckFrom.collagePersonalLive,
      },
      collageTypeText: {
        '30': '课程',
        '29': '专栏',
        '31': 'VIP',
        '32': 'SVIP',
        '48': '知识套餐',
        '124': '直播',
        '36': '活动',
        '9078': '训练营',
        '9010': '社群',
        '9041': '打卡',
        '9042': '练习',
        '9043': '面授课',
        '9044': '电子书',
        '9045': '直播间'
      },
      isShowBuy: false,
      choosePriceIndex: 0,
      isShowFormlg:localStorage.getItem("showForm") == 1 ? true : false,
      bindPhoneSetting: null,
      showNotice: false,
      collagePosterInfo: {},
      localUrl: '', // 本地生成的二维码连接
    };
  },
  beforeRouteEnter(to, from, next) {
    fromPath = from.path;
    next();
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() {

  },
  computed: {
    showTeam() {
      let arrLen = (this.dataInfo.collage.collageGroupType == 1 ? this.dataInfo.peopleNum : this.dataInfo.clustering) - (this.dataInfo.team ? this.dataInfo.team.length : 0);
      if (arrLen > 0) {
        return arrLen
      } else {
        return 0;
      }
    }
  },
  methods: {
    inviteFriends() {
      if (this.bindPhoneSetting && this.bindPhoneSetting.shareBind) {
        if (utilJs.goBindMobile()) return;
      }

      let prodId = null;
      const lastTime = this.isMall ? this.mallTimeFn() : this.timeFn() ;

      const localUrl = this.isMall
        ? `${window.location.href.split("#")[0]}#/mall/shopDetail/shopDetail?ShopNo=${this.dataInfo.mgId}&fromCollageInvite=1&groupId=${this.dataInfo.groupId}&orderId=${this.$route.query.orderId}&refereeId=${localStorage.getItem("userId")}`
        : `${window.location.href.split("#")[0]}#${this.$route.path}?groupId=${this.groupId}&collageId=${this.collageId}&isRelForm=${this.isRelForm}&relType=${this.relType}&extId=${this.extId}&refereeId=${localStorage.getItem("userId")}`;

      // 如果是商城
      if (this.isMall) {
        prodId = this.dataInfo.mgId;
        const { peopleNum, avatar, playersPrice, name, price, isCaptain} = this.dataInfo
        this.collagePosterInfo = {
          lastTime,
          localUrl,
          prodName: name,
          prodPrice: price,
          ckForm: this.cfrom.shopping,
          clustering: peopleNum,
          cover: avatar,
          playersPrice,
          isCaptain
        }
      } else {
        prodId = this.dataInfo.collage.prodType == this.cfrom.collageActivity ? this.dataInfo.collage.activityId
        : this.dataInfo.collage.prodType == this.cfrom.collageEdu ? this.dataInfo.collage.jwSalesId : this.dataInfo.collage.prodId;

        const { ckForm, clustering, isCaptain} = this.dataInfo;
        const {cover, playersPrice, prodName, prodPrice, courseType} = this.dataInfo.collage;

        let vipCover = ckForm == global.ckFrom.vip && cover.coverType == 1 ? 'https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/0/vip.png' : cover.coverUrl // 如果是旧数据的会员图片,coverType=1默认那四张图的时候
        let svipCover = ckForm == global.ckFrom.svip && cover.coverType == 1 ? 'https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/0/svip.png' : cover.coverUrl

        this.collagePosterInfo = {
          lastTime,
          localUrl,
          prodName,
          prodPrice,
          ckForm,
          clustering,
          courseType,
          cover: ckForm == global.ckFrom.vip ? vipCover : ckForm == global.ckFrom.svip ? svipCover : cover,
          playersPrice,
          isCaptain,
        }
      }

      this.$nextTick(() => {
        this.$refs.collageCom.public_open({id: prodId})
      })

    },
    goGoodsDetail() {
      this.$routerGo(this, "push", {
        path: '/mall/shopDetail/shopDetail',
        query: {
          shopNo: this.dataInfo.mgId
        }
      })
    },
    goOrderDetail() {
      this.$routerGo(this, "push", {
        path: '/mall/mallOrder/orderDetail',
        query: {
          goId: this.$route.query.orderId,
          collageId: this.collageId
        }
      })
    },
    //关闭入群引导弹窗
    hideDialog() {
      let curActivityId = this.dataInfo.collage.activityId * 1;
      let localActivityArr = localStorage.getItem("activityGuideArray");
      let activityArray = (localActivityArr && JSON.parse(localActivityArr)) || [];
      if (!(localActivityArr && JSON.parse(localActivityArr).includes(curActivityId))) {
        activityArray.length < 99999 ? activityArray.push(curActivityId) : activityArray.shift();
      }
      localStorage.setItem("activityGuideArray", JSON.stringify(activityArray));
    },
    //拼团倒计时
    timeFn: function () {
      if (this.groupId != -1) {
        let stime = this.dataInfo ? utilJs.getTimeByDate(this.dataInfo.openTime) : 0;
        let etime = this.dataInfo ? utilJs.getTimeByDate(this.dataInfo.endTime) : 0;
        let nowTime = (new Date()).getTime();
        //.collage.status 1未开始,2进行中,3已结束,4已停止
        let time = '';
        if (stime > nowTime) {
          this.dataInfo.status = 1;
          time = this.dataInfo.openTime;
        } else if (etime > nowTime) {
          this.dataInfo.status = 2;
          time = this.dataInfo.endTime;
        } else {
          this.dataInfo.status = 3;
        }
        return time;
      } else {
        let stime = this.dataInfo ? utilJs.getTimeByDate(this.dataInfo.collage.startTime) : 0;
        let etime = this.dataInfo ? utilJs.getTimeByDate(this.dataInfo.collage.endTime) : 0;
        let nowTime = (new Date()).getTime();
        //.collage.status 1未开始,2进行中,3已结束,4已停止
        let time = '';
        if (stime > nowTime) {
          this.dataInfo.collage.status = 1;
          time = this.dataInfo.collage.startTime;
        } else if (etime > nowTime) {
          this.dataInfo.collage.status = 2;
          time = this.dataInfo.collage.endTime;
        } else {
          this.dataInfo.collage.status = 3;
        }
        return time;
      }
    },
    //倒计时结束修改状态
    finishFn: function () {
      if (this.groupId != -1) {
        if (this.dataInfo.status == 1) {
          this.dataInfo.status = 2;
          this.timeFn();
        } else {
          this.dataInfo.status = 3;
        }
      } else {
        if (this.dataInfo.collage.status == 1) {
          this.dataInfo.collage.status = 2;
          this.timeFn();
        } else {
          this.dataInfo.collage.status = 3;
        }
      }
    },
     //商城拼团倒计时
    mallTimeFn: function () {
      let etime = this.dataInfo ? utilJs.getTimeByDate(this.dataInfo.endTime) : 0;
      let nowTime = (new Date()).getTime();
      //.collage.status 1未开始,2进行中,3已结束,4已停止
      let time = '';
      if (etime > nowTime) {
        this.dataInfo.status = 2;
        time = this.dataInfo.endTime;
      } else if (etime < nowTime) {
        this.dataInfo.status = 3;
      }
      return time;
    },
    mallFinishFn: function () {
      if (this.dataInfo.status == 2 && this.$route.path == '/homePage/collage/collageDetail') {
        // this.dataInfo.status = 3;
        let $this = this;
        to = setTimeout(function () {
          $this.getMallCollageDetail(); //倒计时结束后重新请求状态
        }, 800)
      }
    },
    goBuy: function () {
      //要加判断是否选择阶梯
      if (this.dataInfo.collage && (this.dataInfo.collage.collageGroupType == 1 || (this.dataInfo.collage.status == 2 && this.dataInfo.userType == -1 && this.groupId != -1 && this.dataInfo.payStatus != 1 && this.dataInfo.payStatus != 2))) {
        console.log(22222222222222222)
        this.goChoseBuy();
      } else {
        this.isShowBuy = true; //选择阶梯
      }
    },
    goPay() {
      let pathQuery = {
        cId: this.dataInfo.groupId,
        extId: this.dataInfo.collageId,
        ckFrom: this.dataInfo.collage.prodType,
        isFromInvite: 0,
        prodId: this.dataInfo.collage.prodId,
        recRelateId: this.$route.query.recRelateId,
        recType: this.$route.query.recType,
      };
      if (this.goodsRoomId) {
        pathQuery.goodsRoomId = this.goodsRoomId;
      }
      if (this.dataInfo.collage && this.dataInfo.collage.collageGroupType == 2) {
        pathQuery.stepIndex = this.dataInfo.collage.collageGrades[this.choosePriceIndex].index;
      }
      if (this.dataInfo.collage.prodType == global.ckFrom.collageCourse) {
        pathQuery.courseType = this.dataInfo.collage.courseType;
      }
      let pathRoute = "/homePage/course/coursePay";
      if (this.dataInfo.collage.prodType == this.cfrom.collageEdu) {
        // 如果是从面授课拼团过来
        pathRoute = '/edu/confirmOrder';
        pathQuery.cId = this.dataInfo.groupId;
        pathQuery.extId = this.dataInfo.collage.jwSalesId;
        pathQuery.jwSaleCourseSpecId = this.$route.query.jwSaleCourseSpecId || (this.dataInfo.collage.fatherProdId != 0 ? this.dataInfo.collage.prodId : -1);
        if (this.$route.query.type) {
          pathQuery.type = this.$route.query.type
        } else {
          pathQuery.type = this.dataInfo.collage.fatherProdId != 0 ? 2 : 1;
        }
        pathQuery.price = this.dataInfo.collage.playersPrice;
        pathQuery.isSale = this.$route.query.isSale || this.dataInfo.collage ? 2 : 1;
        pathQuery.collageId = this.$route.query.collageId;
        pathQuery.groupId = this.$route.query.groupId || this.dataInfo.groupId;
        pathQuery.prodId = this.$route.query.prodId || this.dataInfo.collage.jwSalesId;
      }
      this.$routerGo(this, "push", {
        path: pathRoute,
        query: pathQuery
      });
    },
    goChoseBuy: function () {
      // 判断体验版是否到期，到期之后不可购买商品
      if (utilJs.alertShopExpire(this, utilJs.getTimeByDate(this.companyAuth.expireTime))) return true;
      if (!utilJs.isOpenIosGzhPay(this.dataInfo.collage.prodType)) {
        this.$store.commit('updateShowVitualModal', true);
        return;
      }
      if (this.bindPhoneSetting && this.bindPhoneSetting.buyBind && utilJs.goBindMobile()) {
        if ((this.groupId == -1 && Number(this.dataInfo.collage.captainPrice) == 0) || this.dataInfo.collage.prodType == this.cfrom.collageActivity || this.isRelForm) {
          let pathQuery = {};
          if (this.goodsRoomId) {
            pathQuery.goodsRoomId = this.goodsRoomId;
          }
          utilJs.goBindMobile(pathQuery);
        } else {
          if (this.dataInfo.collage.prodType == this.cfrom.distributionCollageColumn || this.dataInfo.collage.prodType == this.cfrom.collageColumn || this.dataInfo.collage.prodType == this.cfrom.collageCourse || this.dataInfo.collage.prodType == this.cfrom.collagePackage || this.dataInfo.collage.prodType == this.cfrom.collageLive || this.dataInfo.collage.prodType == this.cfrom.collageCamp || this.dataInfo.collage.prodType == this.cfrom.collageSocial || this.dataInfo.collage.prodType == this.cfrom.collageClockIn || this.dataInfo.collage.prodType == this.cfrom.collageItemBank || this.dataInfo.collage.prodType == this.cfrom.collageEdu || this.dataInfo.collage.prodType == this.cfrom.collagePersonalLive) {
            let ckFrom = this.dataInfo.collage.prodType;
            let pathQuery = {
              cId: this.dataInfo.groupId,
              extId: this.dataInfo.collageId,
              ckFrom: ckFrom,
              isFromInvite: 0,
              isGoPay: true,
              prodId: this.dataInfo.collage.prodId
            };
            if (this.goodsRoomId) {
              pathQuery.goodsRoomId = this.goodsRoomId;
            }
            if (this.dataInfo.collage.prodType == global.ckFrom.collageCourse) {
              pathQuery.courseType = this.dataInfo.collage.courseType;
            }
            if (this.dataInfo.collage && this.dataInfo.collage.collageGroupType == 2) {
              pathQuery.stepIndex = this.dataInfo.collage.collageGrades[this.choosePriceIndex].index;
            }
            utilJs.goBindMobile(pathQuery);
          } else if (this.dataInfo.collage.prodType == this.cfrom.collageVip || this.dataInfo.collage.prodType == this.cfrom.collageSvip) {
            let pathQuery = {};
            if (this.goodsRoomId) {
              pathQuery.goodsRoomId = this.goodsRoomId;
            }
            utilJs.goBindMobile(pathQuery);
          } else {
            let pathQuery = {};
            if (this.goodsRoomId) {
              pathQuery.goodsRoomId = this.goodsRoomId;
            }
            if (this.dataInfo.collage.prodType == global.ckFrom.collageCourse) {
              pathQuery.courseType = this.dataInfo.collage.courseType;
            }
            utilJs.goBindMobile(pathQuery);
          }
        }
      } else {
        // 判断什么类型拼图取价格
        let leaderPrice = '';
        if (this.dataInfo.collage.collageGroupType == 2 && this.dataInfo.collage.captainPriceType == 2) {
          this.dataInfo.collage.collageGrades.forEach((val, index) => {
            if (index == this.choosePriceIndex) {
              leaderPrice = val.captainPrice;
            }
          });
        } else {
          leaderPrice = this.dataInfo.collage.captainPrice;
        }
        // groupId 拼团
        if (this.groupId == -1 && Number(leaderPrice) == 0) {
          if (this.freeOpenClick == true) {
            this.freeOpenClick = false;
            let $this = this;
            if (this.dataInfo.collectPage == 1 && this.dataInfo.hasFormLog == false && this.dataInfo.isRelForm == true) {
              let pathQuery = {
                extId: this.extId,
                collageId: this.collageId,
                ckFrom: this.dataInfo.collage.prodType,
                relType: this.relType,
                type: 1,
                groupId: this.groupId
              };
              if (this.dataInfo.collage.prodType == global.ckFrom.collageCourse) {
                pathQuery.courseType = this.dataInfo.collage.courseType;
              }
              if (this.dataInfo.collage && this.dataInfo.collage.collageGroupType == 2) {
                pathQuery.stepIndex = this.dataInfo.collage.collageGrades[this.choosePriceIndex].index;
              }
              if (this.goodsRoomId) {
                pathQuery.goodsRoomId = this.goodsRoomId;
              }
              if (this.isShowFormlg) {
                this.$routerGo(this, "replace", { path: '/homePage/form', query: pathQuery });
              } else {
                this.goPay()
              }
            } else {
              let data = {
                collageId: this.dataInfo.collageId
              };
              if (this.dataInfo.collage && this.dataInfo.collage.collageGroupType == 2) {
                data.stepIndex = this.dataInfo.collage.collageGrades[this.choosePriceIndex].index;
              }
              utilJs.postMethod(
                global.apiurl + "collage/freeOpenGroup",
                data,
                function (res) {
                  $this.freeOpenClick = true;
                  $this.getCollageDetail();
                },
                function (res) {
                  $this.freeOpenClick = true;
                }
              );
            }
          }
        } else {
          // 参团
          if (this.dataInfo.collage.prodType == this.cfrom.collageActivity) {
            let obj = { activityId: this.dataInfo.collage.activityId, groupId: this.dataInfo.groupId, collageId: this.dataInfo.collageId, prodId: this.dataInfo.collage.prodId, mtkType:2, isRepeatOrder: this.isRepeatOrder };
            let pathQuery = {
              cId: -1,
              extId: this.dataInfo.collage.activityId,
              collageId: this.dataInfo.collageId,
              ckFrom: this.dataInfo.collage.prodType,
              relType: 7,
              type: 1,
              recRelateId: this.$route.query.recRelateId,
              groupId: this.groupId
            };
            if (this.$route.query.refereeId) {
              obj.refereeId = this.$route.query.refereeId;
            }
            if (this.goodsRoomId) {
              pathQuery.goodsRoomId = obj.goodsRoomId = this.goodsRoomId;
            }
            if (this.dataInfo.collage && this.dataInfo.collage.collageGroupType == 2) {
              pathQuery.stepIndex = obj.stepIndex = this.dataInfo.collage.collageGrades[this.choosePriceIndex].index;
            }
            if (this.dataInfo.collectPage == 1) { // 购买前跳转关联表单，提交后直接跳转到选票页面
              pathQuery.isGoActivityBills = 1;
              // let activityBillsData = sessionStorage.getItem("activityBillsData")
              // console.log(activityBillsData, 444444444444445)
              // activityBillsData == obj ? obj : this.goBuy(1);
              // sessionStorage.setItem('activityBillsData', JSON.stringify(obj))
            }
            if (this.dataInfo.collectPage == 1 && this.dataInfo.hasFormLog == false && this.dataInfo.isRelForm == true && this.isShowFormlg) {
              this.$routerGo(this, "replace", { path: '/homePage/form', query: pathQuery });
            } else {
              this.$routerGo(this, "push", {
                path: "/activity/activityBills",
                query: obj
              });
            }
          } else {
            // 购买前
            if (this.dataInfo.collectPage == 1 && this.dataInfo.hasFormLog == false && this.dataInfo.isRelForm == true) {
              console.log(this.dataInfo.collage.prodType, this.cfrom.social)
              if (this.dataInfo.collage.prodType == this.cfrom.collageColumn || this.dataInfo.collage.prodType == this.cfrom.social) {
                let pathQuery = {
                  extId: this.extId,
                  cId: this.collageId,
                  collageId: this.collageId,
                  ckFrom: this.dataInfo.collage.prodType,
                  relType: this.relType,
                  type: 1,
                  recRelateId: this.$route.query.recRelateId,
                  recType: this.$route.query.recType,
                  groupId: this.groupId
                };
                if (this.goodsRoomId) {
                  pathQuery.goodsRoomId = this.goodsRoomId;
                }
                if (this.dataInfo.collage.prodType == global.ckFrom.collageCourse) {
                  pathQuery.courseType = this.dataInfo.collage.courseType;
                }
                if (this.dataInfo.collage && this.dataInfo.collage.collageGroupType == 2) {
                  pathQuery.stepIndex = this.dataInfo.collage.collageGrades[this.choosePriceIndex].index;
                }
                if (this.isShowFormlg) {
                  this.$routerGo(this, "push", { path: '/homePage/form', query: pathQuery });
                } else {
                  this.goPay()
                }
              } else {
                let t = Number(this.dataInfo.collage.courseType);
                switch (t) {
                  case 0:
                    this.relType = 3;
                    break;
                  case 1:
                    this.relType = 2;
                    break;
                  case 2:
                    this.relType = 1;
                    break;
                }
                let pathQuery = {
                  extId: this.extId,
                  collageId: this.collageId,
                  cId: this.collageId,
                  ckFrom: this.dataInfo.collage.prodType,
                  relType: this.relType,
                  type: 1,
                  relId: this.dataInfo.collage.prodId,
                  recRelateId: this.$route.query.recRelateId,
                  recType: this.$route.query.recType,
                  groupId: this.groupId
                };
                if (this.goodsRoomId) {
                  pathQuery.goodsRoomId = this.goodsRoomId;
                }
                if (this.dataInfo.collage.prodType == global.ckFrom.collageCourse) {
                  pathQuery.courseType = this.dataInfo.collage.courseType;
                }
                if (this.dataInfo.collage && this.dataInfo.collage.collageGroupType == 2) {
                  pathQuery.stepIndex = this.dataInfo.collage.collageGrades[this.choosePriceIndex].index;
                }
                if (this.isShowFormlg && this.dataInfo.collage.prodType != this.cfrom.collageEbooks) {
                  // 如果是电子书特殊处理--参团没有跳转表单
                  this.$routerGo(this, "push", { path: '/homePage/form', query: pathQuery });
                } else {
                  this.goPay()
                }
              }
            } else {
              if (this.dataInfo.collage.prodType == this.cfrom.distributionCollageColumn || this.dataInfo.collage.prodType == this.cfrom.distributionColumnPay || this.dataInfo.collage.prodType == this.cfrom.collageColumn || this.dataInfo.collage.prodType == this.cfrom.collageCourse || this.dataInfo.collage.prodType == this.cfrom.collagePackage || this.dataInfo.collage.prodType == this.cfrom.collageLive || this.dataInfo.collage.prodType == this.cfrom.collageCamp || this.dataInfo.collage.prodType == this.cfrom.collageSocial || this.dataInfo.collage.prodType == this.cfrom.collageClockIn || this.dataInfo.collage.prodType == this.cfrom.collageItemBank || this.dataInfo.collage.prodType == this.cfrom.collageEdu || this.dataInfo.collage.prodType == this.cfrom.collageEbooks || this.dataInfo.collage.prodType == this.cfrom.collagePersonalLive) {
                this.goPay();
              } else {
                let ckFrom = this.dataInfo.collage.prodType;
                let pathQuery = {
                  prodId: this.dataInfo.collage.prodId,
                  collageId: this.dataInfo.collageId,
                  groupId: this.dataInfo.groupId,
                  type: ckFrom,
                  recRelateId: this.$route.query.recRelateId,
                  recType: this.$route.query.recType
                };
                if (this.goodsRoomId) {
                  pathQuery.goodsRoomId = this.goodsRoomId;
                }
                if (this.dataInfo.collage && this.dataInfo.collage.collageGroupType == 2) {
                  pathQuery.stepIndex = this.dataInfo.collage.collageGrades[this.choosePriceIndex].index;
                }
                this.$routerGo(this, "push", {
                  path: "/member/vip/vipBuy",
                  query: pathQuery
                });
              }
            }
          }
        }
      }
    },
    //跳转到对应的详情页面
    goToDetail: function (typeVal) {
      if (this.isMall) {
        this.goGoodsDetail();
        return;
      }
      if (this.dataInfo.collage.prodType == this.cfrom.collageEdu && this.dataInfo.payStatus == 2) {
        this.$routerGo(this, "push", {
          path: "/edu/courseDetail",
          query: {
            scid: this.dataInfo.saleCourseItem.id,
            saleCourseId: this.dataInfo.saleCourseId,
            courseId: this.dataInfo.courseId,
            studentId: this.dataInfo.studentId
          }
        });
        return
      }
      let query = {}
      let prodId = this.dataInfo.collage.prodType == this.cfrom.collageActivity ? this.dataInfo.collage.activityId
      : this.dataInfo.collage.prodType == this.cfrom.collageEdu ? this.dataInfo.collage.jwSalesId : this.dataInfo.collage.prodId
      if ((this.dataInfo.collage.prodType == this.cfrom.collageVip || this.dataInfo.collage.prodType == this.cfrom.collageSvip) && this.dataInfo.collage.status >= 2 && this.dataInfo.userType != -1 && this.dataInfo.status == 1) {
        this.dataInfo.collage.prodType = this.cfrom.vip;
      }
      if (this.dataInfo.collage.prodType == this.cfrom.collageVip || this.dataInfo.collage.prodType == this.cfrom.collageSvip) {
        query.isCollage = true;
      }
      // 关联的话，跳表单
      if (this.dataInfo.collage && this.dataInfo.collage.prodId && !this.dataInfo.hasFormLog && this.dataInfo.isRelForm && this.dataInfo.collectPage == 2 && typeVal == 2) {
        this.goForm()
      } else {
        goDetails(this, this.dataInfo.collage.prodType, prodId, query, (this.dataInfo.collage.courseType || 0));
      }
    },
    //跳转表单 prodId--产品id, ckForm-类型, relType--prodType吧, type--表单的类型
    goForm() {
      const { relType, formType, ckForm, courseType, relId } = this.dataInfo;
      let pathQuery = {
        extId: relId,
        relId: relId,
        cId: relId,
        ckFrom: ckForm,
        isFromInvite: 0,
        relType: relType,
        type: formType,
        courseId: relId,
        courseType:courseType,
        isBuied: 1,
        isGoBack: this.dataInfo.collage.status == 2 && this.dataInfo.userType == -1 && (this.groupId == -1 || this.dataInfo.status == 2) && (this.dataInfo.payStatus != 1 && this.dataInfo.payStatus != 2) ? 0 : 1, // 我要开团，我要拼团不需要到详情页
      };
      if (ckForm == 78) {
        pathQuery.ttId = relId;
      }
      this.$routerGo(this, "push", { path: '/homePage/form', query: pathQuery });
    },
    //查看更多拼团
    goCollageList: function () {
      this.$routerGo(this, "push", {
        path: "/homePage/collage/collageList"
      });
    },
    //获取拼团详情
    getCollageDetail: function () {
      let $this = this;
      utilJs.getMethod(global.apiurl + "collage/getCollageDetail?groupId=" + this.groupId + "&collageId=" + this.collageId,
        function (res) {
          $this.companyAuth = JSON.parse(localStorage.getItem("companyAuth"));
          $this.dataInfo = res;
          $this.groupId = res.groupId;
          $this.collageId = res.collageId;
          $this.vipInfo = res.collage.vipInfo;
          $this.dataInfo.collage.prodType = $this.collageProdTypeToNew[$this.dataInfo.collage.prodType]
            ? $this.collageProdTypeToNew[$this.dataInfo.collage.prodType]
            : $this.dataInfo.collage.prodType;
          if (res.isRelForm) {
            $this.isRelForm = res.isRelForm && !res.hasFormLog;
          }

          //已经有权限的用户直接调
          if (res.hasPermission && res.userType == -1) {
            $this.$cjConfirm({
              title: '提示',
              message: '您已经有此活动的权限啦，直接进入此活动吧！',
              showCancelButton: false,
              clickCloseModal: false,
              onConfirm:() => {
                if (res.collage.prodType == $this.cfrom.collageVip || res.collage.prodType == $this.cfrom.collageSvip) {
                  $this.$routerGo($this, "push", {
                    path: "/"
                  });
                } else {
                  $this.goToDetail();
                }
              }
            });
          } else {
            //活动拼团成功获取加群引导信息
            let curActivityId = res.collage.activityId * 1;
            let localActivityGuideArr = localStorage.getItem("activityGuideArray")
              ? JSON.parse(localStorage.getItem("activityGuideArray"))
              : [];
            if (res.status == 1 && res.collage.prodType == $this.cfrom.collageActivity && !localActivityGuideArr.includes(curActivityId)) {
              $this.getGuideInfo(res.collage.activityId);
            }
          }
          let nt = (new Date()).getTime();
          let st = utilJs.getTimeByDate(res.collage.startTime);
          let et = utilJs.getTimeByDate(res.collage.endTime);
          if (nt >= st && nt < et && (res.collage.status == 1 || res.collage.status == 2)) {
            $this.dataInfo.collage.status = 2;

            if (res.groupId != -1 && res.status == 2) {
              if (nt >= utilJs.getTimeByDate(res.openTime) && nt < utilJs.getTimeByDate(res.endTime) && res.status == 1) {
                $this.dataInfo.status = 2;
              } else if (nt > utilJs.getTimeByDate(res.endTime)) {
                $this.dataInfo.status = 3;
              }
            }
          } else if (nt > et && res.collage.status == 2) {
            $this.dataInfo.collage.status = 3;
          }
          $this.wechatShare();
        }
      );
    },
    getMallCollageDetail() {
      let $this = this;
      utilJs.getMethod(global.apiurl + "mallCollage/getMallCollageOrder?orderId=" + this.$route.query.orderId, function (res) {
        $this.companyAuth = JSON.parse(localStorage.getItem("companyAuth"));
        $this.dataInfo = res;
        $this.groupId = res.groupId;
        $this.collageId = res.collageId;
        $this.guideInfo = res.guideData || null;
        if ($this.guideInfo != null && $this.guideInfo.isOpenGuide != 0) {
          $this.showGuidePop = true;
        }
        $this.wechatShare();
      });
    },
    // 获取引导入群信息
    getGuideInfo(activityNo) {
      let _this = this;
      //type 1:详情页；2:报名成功
      utilJs.getMethod(`${global.apiurl}activities/getGuideInfo?activityId=${activityNo}&type=2`, (res) => {
        _this.guideInfo = res;
        if (_this.guideInfo != "") {
          _this.showGuidePop = true;
        }
      });
    },
    //分享
    wechatShare: function () {
      let title = this.isMall
        ? this.dataInfo.title
        : this.dataInfo.collage.title || '特惠详情';
      let shareImg = '';
      if (this.isMall) {
        shareImg = this.dataInfo.avatar;
      } else if (this.vipInfo && this.vipInfo.cover && this.vipInfo.cover.coverType == 2 && this.vipInfo.cover.coverUrl) {
        shareImg = this.vipInfo.cover.coverUrl;
      } else if (this.vipInfo && this.vipInfo.cover && this.vipInfo.cover.coverType == 1 && this.vipInfo.cover.coverUrl) {
        shareImg = window.location.protocol + '//' + window.location.hostname + '/static/i/wap/vip/vip-bg-mb' + this.vipInfo.cover.coverUrl + '.png';
      } else {
        shareImg = this.dataInfo.collage.prodType == this.cfrom.collageEbooks || this.dataInfo.collage.prodType == this.cfrom.collagePersonalLive || this.dataInfo.collage.prodType == this.cfrom.collageCourse || this.dataInfo.collage.prodType == this.cfrom.collageColumn || this.dataInfo.collage.prodType == this.cfrom.collagePackage || this.dataInfo.collage.prodType == this.cfrom.collageActivity || this.dataInfo.collage.prodType == this.cfrom.collageLive || this.dataInfo.collage.prodType == this.cfrom.collagePersonalLive || this.dataInfo.collage.prodType == this.cfrom.collageCamp || this.dataInfo.collage.prodType == this.cfrom.collageSocial || this.dataInfo.collage.prodType == this.cfrom.collageClockIn || this.dataInfo.collage.prodType == this.cfrom.collageEdu || this.dataInfo.collage.prodType == this.cfrom.collageItemBank ? this.dataInfo.collage.cover : (this.dataInfo.collage.prodType == this.cfrom.collageVip ? (window.location.protocol + '//' + window.location.hostname + '/static/i/wap/course/vip.png') : (window.location.protocol + '//' + window.location.hostname + '/static/i/wap/course/svip.png'));
      }
      let shareUrl = this.isMall
        ? `${window.location.href.split("#")[0]}#/mall/shopDetail/shopDetail?shopNo=${this.dataInfo.mgId}&fromCollageInvite=1&groupId=${this.dataInfo.groupId}&orderId=${this.$route.query.orderId}&refereeId=${localStorage.getItem("userId")}`
        : `${window.location.href.split("#")[0]}#${this.$route.path}?groupId=${this.groupId}&collageId=${this.collageId}&isRelForm=${this.isRelForm}&relType=${this.relType}&extId=${this.extId}&refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = this.isMall
        ? (this.dataInfo.shareDesc || ('每件仅需' + this.dataInfo.payMoney + '元，' + this.dataInfo.peopleNum + '人成团。一起拼更省钱噢'))
        : (this.dataInfo.collage.shareDesc || '点击查看详情');
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { });
    },
    //手机端分享
    appShare: function () {
      // let title = this.dataInfo.collage.title || '特惠详情';
      // let shareImg = '';
      // if (this.vipInfo && this.vipInfo.cover && this.vipInfo.cover.coverType == 2 && this.vipInfo.cover.coverUrl) {
      //   shareImg = this.vipInfo.cover.coverUrl;
      // } else if (this.vipInfo && this.vipInfo.cover && this.vipInfo.cover.coverType == 1 && this.vipInfo.cover.coverUrl) {
      //   shareImg = (window.location.protocol + '//' + window.location.hostname + '/static/i/wap/vip/vip-bg-mb' + this.vipInfo.cover.coverUrl + '.png');
      // } else {
      //   shareImg = this.dataInfo.collage.prodType == this.cfrom.collageCourse || this.dataInfo.collage.prodType == this.cfrom.collageColumn || this.dataInfo.collage.prodType == this.cfrom.collagePackage || this.dataInfo.collage.prodType == this.cfrom.collageActivity ? this.dataInfo.collage.cover : (this.dataInfo.collage.prodType == this.cfrom.collageVip ? (window.location.protocol + '//' + window.location.hostname + '/static/i/wap/course/vip.png') : (window.location.protocol + '//' + window.location.hostname + '/static/i/wap/course/svip.png'));
      // }
      // let shareUrl =
      //   `${window.location.href.split("#")[0]}#${this.$route.path}?groupId=${this.groupId}&collageId=${this.collageId}&isRelForm=${this.isRelForm}&relType=${this.relType}&extId=${this.extId}&refereeId=${localStorage.getItem("userId")}`;
      // let shareDesc = this.dataInfo.collage.shareDesc || '点击查看详情';
      let title = this.isMall
        ? this.dataInfo.title
        : this.dataInfo.collage.title || '特惠详情';
      let shareImg = '';
      if (this.isMall) {
        shareImg = this.dataInfo.avatar;
      } else if (this.vipInfo && this.vipInfo.cover && this.vipInfo.cover.coverType == 2 && this.vipInfo.cover.coverUrl) {
        shareImg = this.vipInfo.cover.coverUrl;
      } else if (this.vipInfo && this.vipInfo.cover && this.vipInfo.cover.coverType == 1 && this.vipInfo.cover.coverUrl) {
        shareImg = window.location.protocol + '//' + window.location.hostname + '/static/i/wap/vip/vip-bg-mb' + this.vipInfo.cover.coverUrl + '.png';
      } else {
        shareImg = this.dataInfo.collage.prodType == this.cfrom.collageEbooks || this.dataInfo.collage.prodType == this.cfrom.collagePersonalLive || this.dataInfo.collage.prodType == this.cfrom.collageCourse || this.dataInfo.collage.prodType == this.cfrom.collageColumn || this.dataInfo.collage.prodType == this.cfrom.collagePackage || this.dataInfo.collage.prodType == this.cfrom.collageActivity || this.dataInfo.collage.prodType == this.cfrom.collageLive || this.dataInfo.collage.prodType == this.cfrom.collagePersonalLive || this.dataInfo.collage.prodType == this.cfrom.collageCamp || this.dataInfo.collage.prodType == this.cfrom.collageSocial || this.dataInfo.collage.prodType == this.cfrom.collageClockIn || this.dataInfo.collage.prodType == this.cfrom.collageEdu || this.dataInfo.collage.prodType == this.cfrom.collageItemBank ? this.dataInfo.collage.cover : (this.dataInfo.collage.prodType == this.cfrom.collageVip ? (window.location.protocol + '//' + window.location.hostname + '/static/i/wap/course/vip.png') : (window.location.protocol + '//' + window.location.hostname + '/static/i/wap/course/svip.png'));
      }
      let shareUrl = this.isMall
        ? `${window.location.href.split("#")[0]}#/mall/shopDetail/shopDetail?shopNo=${this.dataInfo.mgId}&fromCollageInvite=1&groupId=${this.dataInfo.groupId}&refereeId=${localStorage.getItem("userId")}`
        : `${window.location.href.split("#")[0]}#${this.$route.path}?groupId=${this.groupId}&collageId=${this.collageId}&isRelForm=${this.isRelForm}&relType=${this.relType}&extId=${this.extId}&refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = this.isMall
        ? (this.dataInfo.shareDesc || ('每件仅需' + this.dataInfo.payMoney + '元，' + this.dataInfo.peopleNum + '人成团。一起拼更省钱噢'))
        : (this.dataInfo.collage.shareDesc || '点击查看详情');
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    }
  },
  activated() {
    if (fromPath == '/activity/activityEnroll' && this.$route.query.hasFormSet == 1) {
      this.$routerGo(this, "replace", { path: '/homePage/form', query: { relId: this.$route.query.activityNo, ckFrom: global.ckFrom.activity, isFromInvite: 0, relType: 7, type: 1 } });
    } else {
      // setDocumentTitle("特惠详情");// eslint-disable-line
      this.isShowShare = false;
      this.dataInfo = '';
      this.freeOpenClick = true;
      this.groupId = this.$route.query.groupId ? this.$route.query.groupId : -1;
      this.collageId = this.$route.query.collageId ? this.$route.query.collageId : -1;
      this.extId = this.$route.query.extId || '';
      this.isRelForm = (this.$route.query.isRelForm == true || this.$route.query.isRelForm == 'true') ? true : false;
      this.relType = this.$route.query.relType || '';
      this.goodsRoomId = this.$route.query.goodsRoomId || '';
      this.isRepeatOrder = this.$route.query.isRepeatOrder || 0; //是否支持多次下单
      this.showGuidePop = false;
      this.guideInfo = "";
      this.isMall = this.$route.query.isMall == 1 ? true : false;
      this.showAllMerber = false;
      this.isShowBuy = false;
      this.choosePriceIndex = 0;
      this.showNotice = false;
      getBindPhoneSetting(29).then(res => {
        this.bindPhoneSetting = res;
      });
      if (this.isMall) {
        setDocumentTitle("拼团详情");// eslint-disable-line
        this.getMallCollageDetail();
      } else {
        setDocumentTitle("特惠详情");// eslint-disable-line
        let $this = this;
        setTimeout(function () {
          $this.getCollageDetail();
        }, 100)
      }
    }
  },
  deactivated() {
    clearTimeout(to);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
.collage-bg {
  background: url('../../../assets/i/wap/collage/collage_clock.png') left top/100% auto no-repeat, linear-gradient(180deg, #FB535B 0%, #FF7650 100%);
}
.bg-FF300C-op10 {
  background: rgba(255, 48, 0, 0.1);
}
.priceBg {
  background: rgba(255,114,37,0.05);
}
.transform-50 {
  transform: translateX(-50%);
}
.bd1-dashed-ccc {
  border: 1px dashed #ccc;
}
.ph44 {
  padding-left: 1.1rem;
  padding-right: 1.1rem;
}
.center {
  margin-left: auto;
  margin-right: auto;
}
.c-ml6 {
  margin-left: 0.15rem;
}
.b-12 {
  bottom: -0.3rem;
}
.bd1-FF300C {
  border: 1px solid #FF300C;
}
.bg-btn1 {
  background-image: linear-gradient(0deg, #FF300C 0%, rgba(255,48,12,0.70) 100%);
}
.bg-btn2 {
  /* border: 1px solid #FF300C; */
  background-image: linear-gradient(0deg, rgba(255,48,12,0.10) 0%, rgba(255,48,12,0.07) 100%);
}
.bg-team{
  background: rgba(254,77,45,0.7);
}
</style>


